<!doctype html>
<html lang="en">
<head>
    <title>Grid - Selection</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="wijgrid provides selection" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../base-reset.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/Aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
    <link href="../demos-single.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.0.8.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.ui.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.0.8.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijgrid.js" type="text/javascript"></script>

    <style type="text/css">
        .demoTable > tbody > tr > td
        {
            vertical-align: top;
            width: 400px;
        }
        
        #demoLogTable
        {
            table-layout: fixed;
            margin-left: 20px;
            width: 100%;
        }
    </style>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                selectionMode: "singleCell",
                columns: [
                    { dataType: "number", sortDirection: "ascending", dataFormatString: "n0" },
                    { dataType: "currency" },
                    { dataType: "number", dataFormatString: "n0" },
                    { dataType: "number", dataFormatString: "p0" }
                ],
                selectionchanged: onSelectionChanged
            });

            function onSelectionChanged() {
                var sc = $("#demo").wijgrid("selection").selectedCells();
                var log = $("#demoLogTable");

                log.find("td").removeClass("ui-state-highlight").html("<span>&nbsp</span>");

                for (var i = 0, len = sc.length(); i < len; i++) {
                    var cellInfo = sc.item(i);
                    var logCell = $(log[0].tBodies[0].rows[cellInfo.rowIndex()].cells[cellInfo.cellIndex()]);
                    logCell.addClass("ui-state-highlight").text(cellInfo.value().toString());
                }
            }

            $("#selectionMode").change(function (e) {
                $("#demo").wijgrid("option", "selectionMode", $(e.target).val());
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Selection</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table class="demoTable">
                <tr>
                    <td>
                        <table id="demo">
                            <thead>
                                <tr>
                                    <th>
                                        ProductID
                                    </th>
                                    <th>
                                        UnitPrice
                                    </th>
                                    <th>
                                        Quantity
                                    </th>
                                    <th>
                                        Discount
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        11
                                    </td>
                                    <td>
                                        14
                                    </td>
                                    <td>
                                        12
                                    </td>
                                    <td>
                                        0
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        42
                                    </td>
                                    <td>
                                        9,8
                                    </td>
                                    <td>
                                        10
                                    </td>
                                    <td>
                                        0
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        72
                                    </td>
                                    <td>
                                        34,8
                                    </td>
                                    <td>
                                        5
                                    </td>
                                    <td>
                                        0
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        14
                                    </td>
                                    <td>
                                        18.6
                                    </td>
                                    <td>
                                        9
                                    </td>
                                    <td>
                                        0
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        51
                                    </td>
                                    <td>
                                        42.4
                                    </td>
                                    <td>
                                        40
                                    </td>
                                    <td>
                                        0
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        41
                                    </td>
                                    <td>
                                        7.7
                                    </td>
                                    <td>
                                        10
                                    </td>
                                    <td>
                                        0
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        51
                                    </td>
                                    <td>
                                        42.4
                                    </td>
                                    <td>
                                        35
                                    </td>
                                    <td>
                                        0.15
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        65
                                    </td>
                                    <td>
                                        16.8
                                    </td>
                                    <td>
                                        15
                                    </td>
                                    <td>
                                        0.15
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        22
                                    </td>
                                    <td>
                                        16.8
                                    </td>
                                    <td>
                                        6
                                    </td>
                                    <td>
                                        0.05
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        57
                                    </td>
                                    <td>
                                        15.6
                                    </td>
                                    <td>
                                        15
                                    </td>
                                    <td>
                                        0.05
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        65
                                    </td>
                                    <td>
                                        16.8
                                    </td>
                                    <td>
                                        20
                                    </td>
                                    <td>
                                        0
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        20
                                    </td>
                                    <td>
                                        64.8
                                    </td>
                                    <td>
                                        40
                                    </td>
                                    <td>
                                        0.05
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        33
                                    </td>
                                    <td>
                                        2
                                    </td>
                                    <td>
                                        25
                                    </td>
                                    <td>
                                        0.05
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <table class="ui-widget ui-widget-content" rules="all" id="demoLogTable">
                            <caption class="ui-widget-header">
                                selection log</caption>
                            <tbody>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <div class="option-row">
                    <label for="">
                        Selection mode</label>
                    <select id="selectionMode">
                        <option>singleCell</option>
                        <option>singleRow</option>
                        <option>singleColumn</option>
                        <option>singleRange</option>
                        <option>multiColumn</option>
                        <option>multiRow</option>
                        <option>multiRange</option>
                    </select>
                </div>
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
            </p>
        </div>
    </div>
</body>
</html>
